<h1>Schedules</h1>

<clr-datagrid (clrDgRefresh)="refresh($event)" [clrDgLoading]="loading" [(clrDgSelected)]="!grouped ? null : selected"
              *ngIf="isInit" #datagrid>
  <clr-dg-action-bar *ngIf="grouped">
    <button type="button" class="btn btn-sm btn-outline-danger" (click)="setMode(false)">
      Cancel
    </button>
    <button type="button" [disabled]="selected?.length === 0" class="btn btn-sm btn-secondary"
            (click)="destroySchedules(selected)">
      Delete schedules(s)
    </button>
  </clr-dg-action-bar>
  <clr-dg-action-bar *ngIf="!grouped">
    <button type="button" class="btn btn-sm btn-secondary" (click)="setMode(true)">
      Group Actions
    </button>
    <button type="button" class="btn btn-sm btn-secondary" (click)="refresh(state)">
      Refresh
    </button>
  </clr-dg-action-bar>
  <clr-dg-column (clrDgColumnResize)="updateContext('sizeName', $event)"
                 [style.width.px]="context.sizeName | datagridcolumn: datagrid : contextName | async">
    <ng-container>
      Name
    </ng-container>
  </clr-dg-column>
  <clr-dg-column (clrDgColumnResize)="updateContext('sizeTaskName', $event)"
                 [style.width.px]="context.sizeTaskName | datagridcolumn: datagrid : contextName | async">
    <ng-container>
      Task name
    </ng-container>
    <clr-dg-filter style="display:none;"></clr-dg-filter>
  </clr-dg-column>
  <clr-dg-column (clrDgColumnResize)="updateContext('sizePlatform', $event)"
                 [style.width.px]="context.sizePlatform | datagridcolumn: datagrid : contextName | async">
    <ng-container>
      Platform
    </ng-container>
    <clr-dg-filter [clrDgFilter]="platformFilter">
      <app-clr-datagrid-platform-filter [value]="context.platform" #platformFilter></app-clr-datagrid-platform-filter>
    </clr-dg-filter>
  </clr-dg-column>
  <clr-dg-column (clrDgColumnResize)="updateContext('sizeCronExpression', $event)"
                 [style.width.px]="context.sizeCronExpression | datagridcolumn: datagrid : contextName | async">
    <ng-container>
      Cron Expression
    </ng-container>
    <clr-dg-filter style="display:none;"></clr-dg-filter>
  </clr-dg-column>
  <clr-dg-row *ngFor="let schedule of page?.items" [clrDgItem]="schedule">
    <clr-dg-cell><a routerLink="/tasks-jobs/schedules/{{schedule.name}}">{{schedule.name}}</a></clr-dg-cell>
    <clr-dg-cell><a [routerLink]="'/tasks-jobs/tasks/' + schedule.taskName">{{schedule.taskName}}</a></clr-dg-cell>
    <clr-dg-cell>{{schedule.platform || 'N/A'}}</clr-dg-cell>
    <clr-dg-cell>{{schedule.cronExpression || 'N/A'}}</clr-dg-cell>
    <clr-dg-action-overflow *ngIf="!grouped">
      <button class="action-item" (click)="details(schedule)">Details</button>
      <button class="action-item" (click)="taskDetails(schedule)">Task details</button>
      <button class="action-item" (click)="createSchedule(schedule)">Add new schedule</button>
      <button class="action-item" (click)="destroySchedules([schedule])">Destroy</button>
    </clr-dg-action-overflow>
  </clr-dg-row>
  <clr-dg-placeholder>No results found.</clr-dg-placeholder>
  <clr-dg-footer>
    {{page?.total}} schedules
  </clr-dg-footer>
</clr-datagrid>

<app-schedule-destroy #destroyModal (onDestroyed)="refresh(state)"></app-schedule-destroy>
